<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./fonts//demo.css"> -->
  <link rel="stylesheet" href="/admin/fonts/iconfont.css">
  <link rel="stylesheet" href="/admin/lib/layui/css/layui.css" />
  <style>
    .space_slide {
      margin: 10px 20px 30px 20px;
    }

    #updateNavBox {
      display: none;
      width: 500px;
    }

    #updateNavBox .layui-input {
      width: 90%;
    }
  </style>
</head>

<body>

  <div class="layui-card space_slide">
    <div class="layui-card-header">
      <span class="layui-breadcrumb">
        <a href="https://5aebf8b605931.t73.qifeiye.com/">首页</a>
        <a href="javascript:;">首页管理</a>
        <!-- <a href="">轮播图管理</a> -->
        <a><cite>导航展示</cite></a>
      </span>
    </div>
    <div class="layui-card-body">

      <!-- 数据表格 -->
      <table id="tableRender" lay-filter="test"></table>
    </div>
  </div>

  <!-- 修改的弹出层 -->
  <div id="updateNavBox">
    <form class="layui-form" action="">
      <!--id  在页面中不显示 -->
      <input class="layui-input" name="nav_id" type="hidden">
      <div class="layui-form-item">
        <label class="layui-form-label">导航名称</label>
        <div class="layui-input-block">
          <input type="text" name="nav_name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">导航别名</label>
        <div class="layui-input-block">
          <input type="text" name="nav_alias" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="updateForm">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>


</body>

</html>
<script src="/admin/lib/layui/layui.js"></script>

<!-- 动态表格开始 -->
<script type="text/html" id="operation">
  <div>
    <button type="button" onclick="updateNav('{{d.nav_id}}')" class="layui-btn layui-btn-xs layui-btn-warm">修改</button>

    <button type="button" onclick="deleteNav('{{d.nav_id}}')"
      class="layui-btn  layui-btn-xs layui-btn-danger">删除</button>
  </div>
</script>
<!-- 排序的表单 -->
<script type="text/html" id="navsortord">
  <div>
    <input type="text" onchange="updateSort('{{d.nav_id}}',this)" autocomplete="off" class="layui-input"
      value="{{d.nav_sort}}" style="width: 50px;border-color: #999;padding-left: 0;text-align: center;height: 27px;">
  </div>
</script>
<!-- 是否展示 -->
<script type="text/html" id="exhibition">
  <div>
    <!-- <button type="button" class="layui-btn">?已展示:已隐藏</button> -->
    <span onclick="updateShow('{{d.nav_id}}','{{d.is_show?0:1}}')" class="layui-btn  {{d.is_show?'':'layui-btn-danger'}}"
      style="height: 27px;line-height: 27px;">{{d.is_show?"已展示":"已隐藏"}}</span>
  </div>
</script>
<script type="text/html" id="remove">
  <div>
    <span type="button" class="layui-btn layui-btn-danger" onclick="deleteNavCheck()" style="margin-right: 20px;"><i
        class="layui-icon layui-icon-delete"></i> 批量删除</span>
    <div class="layui-input-inline">
      <!-- 搜索当成表单来做就好了 -->
      <!-- <button lay-submit lay-filter="*">提交</button>     -->
      <input type="text" name="search" placeholder="请输入导航名称" autocomplete="off" class="layui-input">
    </div>
    <button type="button" lay-submit lay-filter="search" class="layui-btn"><i class="layui-icon layui-icon-search"></i>
      查询</button>
  </div>
</script>
<!-- 动态表格结束 -->


<script>
  //注意：导航 依赖 element 模块，否则无法进行功能性操作
  //JS
  var $
  var layer
  var tableIns
  var form
  var table
  // 点击展示或者隐藏按钮修改状态
  function updateShow(id, show) {
    $.ajax({
      type: 'get',
      url: `/admin/nav/update?id=${id}&show=${show}`,
      success: (res) => {
        // 得到后端发来的响应
        let {
          code,
          msg
        } = res
        if (code == 1) {
          // 修改成功
          // 现在修改成功了 但是页面还是显示的原来的  使用我们要刷新页面  即 表格重载
          tableIns.reload()
        }
        //  else {
        //   // 修改失败
        // layer.msg(msg)
        // }
        layer.msg(msg)
      }
    })
  }

  // 批量删除
  function deleteNavCheck() {
    var checkStatus = table.checkStatus('tableRender');
    console.log(checkStatus.data.length);
    var ids
    if (checkStatus.data.length > 0) {
      // 选中大于1
      var idsArray = [];
      for (var i = 0; i < checkStatus.data.length; i++) {
        idsArray.push(checkStatus.data[i].nav_id);
      }
      ids = idsArray.toString();
      // console.log(ids);
      // layui.layer.alert(ids);
      // console.log(ids);
      var deleteAllIns = layer.confirm('您确认要将选中的全部删除么', {
        btn: ['删除', '取消'],
      }, function (index, layero) {
        $.ajax({
          type: 'get',
          data: {
            ids
          },
          url: '/admin/nav/deletecheck',
          success: res => {
            if (res.code == 1) {
              tableIns.reload()
              layer.close(deleteAllIns)
            }
          }
        })
      }, function (index) {
        //按钮【按钮二】的回调
        // console.log('no');
      });

      // $(".layui-form-checked").not('.header').parents('tr').remove();
    } else {
      layui.layer.alert("请至少选择一行");
    }
  }

  // 操作中的删除按钮 点击删除
  function deleteNav(id) {
    layer.open({
      content: '确定要执行删除么?',
      btn: ['确定', '取消', ],
      yes: function (index, layero) {
        //按钮【按钮一】的回调
        $.get(`/admin/nav/delete?id=${id}`, (res) => {
          // console.log(res);
          let {
            code,
            msg
          } = res
          if (code == 1) {
            tableIns.reload()
          }
          layer.msg(msg)
        })
      },
      btn2: function (index, layero) {
        //按钮【按钮二】的回调

        //return false 开启该代码可禁止点击该按钮关闭
      },


    });
  }


  function updateNav(id) {
    // console.log(1);

    // console.log(id);
    // 厚道前台的id 
    // 发起get请求
    $.get(`/admin/nav/updateAll?id=${id}`, (res) => {
      var index = layer.open({
        type: 1,
        title: '修改导航',
        content: $('#updateNavBox') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
      });
      // console.log(res);
      let data = res.data
      // console.log(data);
      // 方法一:
      // 也可以DOM获取   元素js   表单对象.value

      // let nav_name = document.querySelector('[name=nav_name]')
      // let nav_alias = document.querySelector('[name=nav_alias]')

      // {nav_id: 1, nav_name: '网站首页', nav_alias: 'website homepage', nav_sort: 1, is_show: 1}
      // nav_name.value如果不赋值  就是获取这个对象 如果有=  那么就是赋值

      // nav_name.value = data.nav_name
      // nav_alias.value = data.nav_alias

      // 方法二:

      // jquery对象   jquery对象.val()
      // console.log($('[name=nav_name]'));
      // console.log($('[name=nav_alias]'));

      $('[name=nav_name]').val(data.nav_name)
      $('[name=nav_alias]').val(data.nav_alias)
      $('[name=nav_id]').val(data.nav_id)

      // 数据提交
      form.on('submit(updateForm)', (data) => {
        // data.field  是表单数据

        // console.log(data) //当前容器的全部表单字段，名值对形式：{name: value}
        // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

        $.ajax({
          url: '/admin/nav/updateAll',
          type: 'post',
          data: data.field,
          dataType: 'json',
          success: (res) => {
            let {
              code,
              msg
            } = res
            if (code == 1) {
              // 关掉窗口
              layer.close(index)
              // 表格重载
              tableIns.reload()
            }
            layer.msg(msg)
          }
        })
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
      });
    })
  }


  layui.use(['element', 'layer', 'util', 'jquery', 'form', 'table'], function () {
    var {
      element,
      util,
      // table,
    } = layui
    $ = layui.$
    layer = layui.layer
    form = layui.form
    table = layui.table
    //  点击是否展示按钮修改其的值

    // 数据表格
    tableIns = table.render({
      elem: '#tableRender',
      url: '/admin/nav/query',
      cols: [
        [{
          field: 'is_checkout',
          width: '5%',
          type: 'checkbox',
          fixed: 'left'
        }, {
          field: 'nav_id',
          title: 'ID',
          width: '10%',
          sort: true,
        }, {
          field: 'nav_name',
          title: '导航名称',
          width: '25%'
        }, {
          field: 'nav_alias',
          title: '导航别名',
          width: '25%',
        }, {
          field: 'nav_sort',
          title: '导航排序',
          width: '10%',
          sort: true,
          templet: '#navsortord'
        }, {
          field: 'is_show',
          title: '是否展示',
          width: '15%',
          templet: '#exhibition'
        }, {
          field: 'experience',
          title: '操作',
          width: '10%',
          fixed: 'right',
          templet: '#operation'
        }]
      ],
      toolbar: 'default',
      cellMinWidth: 100, //每个单元格的最小宽度为100px
      loading: true, //加载数据的时候会有进度条
      title: '导航栏信息详情表',
      // totalRow: true,
      toolbar: '#remove',
      page: true,
      limits: [5, 10, 15, 20, 30, 50, 70, 80, 90, 100],
      limit: 10
    })



    // 表格的搜索功能
    form.on('submit(search)', function (data) {
      // console.log(data);
      // 发ajax请求 get方式
      // $.ajax({
      //   url: '/admin/nav/query',
      //   type: 'get',
      //   data: data.field,
      //   success: (res) => {
      //     console.log(res);
      //   }
      // })
      // 后台就收到了  { page: '1', limit: '10', search: 'asd' }

      // 使用表格的重载 就不需要
      tableIns.reload({
        where: { //设定异步数据接口的额外参数，任意设
          search: data.field.search,
        },
        page: {
          curr: 1 //重新从第 1 页开始
        }
      });
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    })

    //监听提交
    form.on('submit(formDemo)', function (data) {
      layer.msg(JSON.stringify(data.field));
      return false;
    });

  });
</script>
<script>


</script>